import { useState, useEffect } from 'react'

import TodoAdd from './components/TodoAdd'
import TodoList from './components/TodoList'
import TodoFooter from './components/TodoFooter'

import './App.css'

function App () {
  const [todos, setTodos] = useState([
    { id: 1, text: '吃饭', done: true },
    { id: 2, text: '睡觉', done: false }
  ])

  const onAddTodo = (text: string) => {
    setTodos([
      ...todos,
      {
        id: todos.length + 1,
        text,
        done: false
      }
    ])
  }

  // 更改选中状态
  const onCheckedChange = (id: number) => {
    const newTodos = todos.map(todo => {
      if (todo.id === id) {
        return {
          ...todo,
          done: !todo.done
        }
      } else {
        return todo
      }
    })

    setTodos(newTodos)
  }

  // 删除
  const onDeleteTodo = (id: number) => {
    const newTodos = todos.filter(todo => todo.id !== id)

    setTodos(newTodos)
  }

  /**
   * 功能：数据持久化到 localStorage 中
   *
   * 两件事：
   *  1. 组件加载时，读取 localStorage 中的数据，并渲染在组件中
   *  2. 任务数据改变时，将最新的数据，保存到 localStorage 中
   */

  // 启动时加载
  useEffect(() => {
    const res = localStorage.getItem('todos')
    if (res) {
      setTodos(JSON.parse(res))
    }
  }, [])

  // todos改变之后，保存到本地
  useEffect(() => {
    localStorage.setItem('todos', JSON.stringify(todos))
  }, [todos])

  return (
    <section className='todoapp'>
      {/* 添加任务 */}
      <TodoAdd onAddTodo={onAddTodo} />

      <section className='main'>
        <input id='toggle-all' className='toggle-all' type='checkbox' />
        <label htmlFor='toggle-all'>Mark all as complete</label>
        {/* 列表组件 */}
        <TodoList
          list={todos}
          onCheckedChange={onCheckedChange}
          onDeleteTodo={onDeleteTodo}
        />
      </section>

      {/* footer 组件 */}
      <TodoFooter />
    </section>
  )
}

export default App
